<template>
	<!-- 资金管理 -->
	<div class="tobeDone">
		<tableIndex
			ref="tableRef"
			:tableData="tableData"
			:tableHead="tableHead"
			:isIndex="true"
			:isSelection="true"
			:isRadio="false"
			:fields="state.fields"
			:height="500"
			:page="state.page"
			@selectChange="selectChange"
			@searchList="searchList"
			@page-change="pageChange"
			@resetList="resetList"
		>
			<template #btns>
				<el-button size="small" class="button-add" @click="add">
					<svg-icon icon-class="add-icon-1" class="m-r5"/>
					新增
				</el-button>
				<el-button size="small" class="button-add" @click="del">
					<svg-icon icon-class="delete-icon" class="m-r5"/>
					删除
				</el-button>
				<el-button size="small" class="button-add" @click="onExport">
					<svg-icon icon-class="add-icon" class="m-r5"/>
					一键导出
				</el-button>
			</template>
			<template #operate>
				 <el-table-column label="操作" width="200" fixed="right">
					<template #default="{ row }">
						<el-button
							size="small"
							class="look"
							type="primary"
							@click="onEdit(row)"
							>编辑</el-button
						>
					</template>
				</el-table-column>
			</template>
		</tableIndex>
	</div>

	<add-popup
			v-if="visible"
			ref="addPopupRef"
			v-model:visible="visible"
			:title="title"
			width="30%"
			confirm-button-title="确认"
			@onConfirm="onConfirm"/>
</template>

<script setup>
import TableIndex from "@/components/table/index.vue";
import {managementApi, newInvestApi} from "@/api/investment.js";
import {ref, onMounted, reactive, nextTick} from "vue";
import {useRouter} from "vue-router";
import AddPopup from "./components/addPopup.vue"
import router from "@/router";
import {ElMessage, ElMessageBox} from "element-plus";
import {exportExcelFile} from "@/common/utils/GlobalUtils";

const projectId = router.currentRoute.value.params.projectId;

const visible = ref(false);
const title = ref('添加');

const state = reactive({
	searchParam: {
		name: "",
	},
	page: {
		page: 1,
		pageSize: 10,
		total: 0,
	},
	fields: [
		{ key: "year", label: "年度范围筛选", type: "year" },
		{
			key: "quarter",
			label: "季度范围筛选",
			type: "select",
			options: {
				list: [
					{ label: "全部", value: "" },
					{ label: "第一季度", value: '一季度' },
					{ label: "第二季度", value: '二季度' },
					{ label: "第三季度", value: '三季度' },
					{ label: "第四季度", value: '四季度' },
				],
			},
		},
	],
});
// const info = ref(null)
const tableData = ref([]);
const tableHead = ref([
	{
		prop: "year",
    label: "年度",
	},
	{
		prop: "quarter",
		label: "季度",
	},
	{
		prop: "month",
		label: "月份",
	},
	{
		prop: "rate",
    label: "社事投股比",
	},
	{
		prop: "getProfit",
		label: "社事投利润",
	},
	{
		prop: "income",
		label: "收入总金额(实际)",
		minWidth:120
	},
	{
		prop: "cost",
		label: "成本总金额(实际)",
		minWidth:120
	},
	{
		prop: "profit",
		label: "利润总金额",
	},
	{
		prop: "createUserName",
    label: "创建人",
	},
	{
		prop: "createTime",
		label: "创建时间",
	},
]);
const budgetSubjectList = ref([]);

const selectList = ref([]);
const selectChange = (e) => {
	selectList.value = e;
};

let Router = useRouter();
const projectProposal = (row) => {
	Router.push({
		path: "/businessFinance/fundManagement/fundBudgetManagement/budgeting",
	});
};

//搜索接口请求
const searchList = (e) => {
	getPage(e);
};
const resetList = (e) => {
	state.searchParam.name = "";
	getPage();
};
//分页变化
const pageChange = (e) => {
	state.page.page = e.page;
	state.page.pageSize = e.limit;
	getPage();
};
const getPage = (e) => {
	let obj = {
		pageNum: state.page.page,
		pageSize: state.page.pageSize,
		param: {
			...e,
			projectId:projectId
		},
	};
	newInvestApi.getBusinessCondition(obj).then((res) => {
		if (res.code === "200") {
			tableData.value = res.data.content;
			state.page.total = res.data.totalSize;
		}
	});
};

/**
 * 新增
 */
const add = () => {
	title.value = '添加';
	visible.value = true;
}

/**
 * 编辑
 */
const onEdit = (row) => {
	title.value = '编辑';
	visible.value = true;
	nextTick(()=>{
		for (let key in row){
			for (let key2 in addPopupRef.value.form){
				if(key===key2){
					addPopupRef.value.form[key2] = row[key];
				}
				if(key2==='time'){
					addPopupRef.value.form[key2] = row['year']+'-'+(row['month'].toString().length===1?'0'+row['month']:row['month']);
				}
			}
		}
	});
}

/**
 * 删除
 */
const del = () => {
	if(!selectList.value.length){
		return ElMessage.warning('请选择需要操作的数据行!');
	}
	ElMessageBox.confirm(
			'确认删除吗?',
			'提示',
			{
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}
	)
			.then((value) => {
				if(value==='confirm'){
					let ids = selectList.value.map(item=>{return item.id});
					newInvestApi.delBusiness({projectId:projectId,ids:ids}).then(res=>{
						if(res.code==='200'){
							ElMessage.success('删除成功！');
							getPage();
						}
					});
				}
			})
}

const tableRef = ref(null);
//获取搜索组件数据
const getSearchData = () => {
	return tableRef.value.getSearchData();
};

/**
 * 导出
 */
const onExport = () => {
	let params = {
		...getSearchData(),
		projectId:projectId
	}
	newInvestApi.exportBusinessCondition(params).then(res=>{
			if(res){
				exportExcelFile(res,'经营情况表');
			}
	});

}

const addPopupRef = ref(null);

/**
 * 确认
 */
const onConfirm = () => {
	console.log('addPopupRef.value',addPopupRef.value)
	addPopupRef.value.validate((valid, fields) => {
		if (valid) {
			let params = {
				...addPopupRef.value.form,
				projectId:projectId
			}
			newInvestApi.addBusiness(params).then(res=>{
				visible.value = false;
				if(res.code==='200'){
					ElMessage.success(title.value+'成功!');
					getPage();
				}
			});
		} else {
			console.log('error submit!', fields)
		}
	})
}

onMounted(() => {
	getPage();
});
</script>

<style lang="scss" scoped>
.tobeDone {
	width: 100%;
	height: 100%;
}

.button-add:hover,:focus{
	.add-icon{
		background-color: #FFFFFF !important;
	}
}
</style>
